<template>
    <div class="box">
        <div class="top">
            <h1>店铺管理</h1>
            <el-button type="primary" @click="saveTheStore">保存店铺信息</el-button>
        </div>

        <el-scrollbar height="90%">
        <el-form :model="form"  style="margin-top: 20px;margin-left: 20px;">
            <el-form-item label="店铺名称" >
                <el-input v-model="form.name" />
            </el-form-item>
            
            <el-form-item label="店铺公告" prop="avatar">
                <el-input v-model="form.bulletin" type="textarea" />
            </el-form-item>

            <el-form-item label="店铺头像">
                <el-upload :action="serverUrl+'/store/store_img_upload'" 
                list-type="picture-card" 
                :show-file-list="false" 
                :on-success="handleAvatarSuccess" 
                :before-upload="beforeAvatarUpload">
                <img v-if="form.avatar" :src="serverUrl+form.avatar" alt="头像" style="width: 150px; height: 150px;object-fit: cover;">
                <div class="el-upload__text">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__hint"></div>
                </div>
                </el-upload>
            </el-form-item>

            <el-form-item label="店铺图片" prop="pics">
                <el-upload
                v-model:file-list="fileList"
                :action="serverUrl+'/shop/upload'"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <el-icon><Plus /></el-icon>
                </el-upload>
            </el-form-item>    

            <el-form-item label="起送价格" >
                <el-input v-model="form.minPrice" style="width: 100%"/>
            </el-form-item>


            <el-form-item label="送达时间" >
                <el-input v-model="form.deliveryTime" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="店铺描述" >
                <el-input v-model="form.description" type="textarea" />
            </el-form-item>

            <el-form-item label="店铺评分" >
                <el-input v-model="form.score" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="店铺销量" >
                <el-input v-model="form.sellCount" style="width: 100%"/>
            </el-form-item>

            <el-form-item label="活动支持">
                <el-checkbox-group v-model="form.supports">
                    <el-checkbox value="单人精彩套餐" name="type">
                        单人精彩套餐
                    </el-checkbox>
                    <el-checkbox value="VC无限橙果汁全场8折" name="type">
                        VC无限橙果汁全场8折
                    </el-checkbox>
                    <el-checkbox value="在线支付满28减5" name="type">
                        在线支付满28减5
                    </el-checkbox>
                    <el-checkbox value="特价饮品八折抢购" name="type">
                        特价饮品八折抢购
                    </el-checkbox>
                    <el-checkbox value="中秋特惠" name="type">
                        中秋特惠
                    </el-checkbox>
                    <el-checkbox value="国庆特价" name="type">
                        国庆特价
                    </el-checkbox>
                    <el-checkbox value="春节1折折扣" name="type">
                        春节1折折扣
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="营业时间"style="width: 450px;">
                <el-time-picker
                v-model="form.date"
                is-range
                range-separator="至"
                start-placeholder="Start time"
                end-placeholder="End time"
                />
            </el-form-item>
     
            
        </el-form>

        <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
        </el-scrollbar>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage } from 'element-plus'
import { serverUrl } from '../utils/common'
import { shopInfo,shopEdit } from '../api/shop'

const form = reactive({
    id: 0,
    name: '',
    bulletin: '',
    avatar: '',
    pics: [],
    minPrice:0,
    deliveryTime: 0,
    description: '',
    score: '',
    sellCount:0,
    supports:[],
    date:[]
})


const fileList = ref<UploadUserFile[]>([])
// 图片预览
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const getShopInfo = async () => {
    try {
     await shopInfo().then(res => {
      console.log(res);
      form.name = res.data.name;
      form.bulletin = res.data.bulletin;
      form.avatar = res.data.avatar;
      form.pics = res.data.pics;
      form.minPrice = res.data.minPrice;
      form.deliveryTime = res.data.deliveryTime;
      form.description = res.data.description;
      form.score = res.data.score;
      form.sellCount = res.data.sellCount;
      form.supports = res.data.supports;
      form.date = res.data.date;
      console.log(form);
      fileList.value = res.data.pics.map(pic => ({
                name: pic,
                url: serverUrl + '/store_imgs/' + pic
            }))
     }) 
    }
    catch (error) {
      console.log(error); 
    }
}

getShopInfo()

const saveTheStore = async () => {
    // 转换时间格式为字符串数组
    const [startTime, endTime] = form.date.map(date => 
        date.toLocaleTimeString('en-GB', { hour12: false })
    )

    // 准备提交数据
    const submitData = {
        ...form,
        deliveryPrice: Number(form.deliveryPrice), // 确保数值类型
        deliveryTime: Number(form.deliveryTime),
        score: Number(form.score),
        sellCount: Number(form.sellCount),
        date: [startTime, endTime], // 格式化为字符串数组
        pics: fileList.value.map(item => 
            item.response?.imgUrl.split('/').pop() || item.name
        )
    }

    try {
        const { code, msg } = await shopEdit(submitData)
        if (code === 0) {
            ElMessage.success(msg)
            getShopInfo()
        } else {
            ElMessage.error(msg)
        }
    } catch (error) {
        ElMessage.error('保存失败')
        console.error(error)
    }
}


const beforeAvatarUpload= (rawFile) => {
  if (!rawFile.type.includes('image')) {
    ElMessage.error('店铺头像必须是图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}
// 点击预览

const handlePictureCardPreview=(res)=>{
  dialogImageUrl.value = res.url
  dialogVisible.value=true
}
const handleRemove = (res)=>{
  console.log(res);
}
// 店铺头像 上传成功hooks
const handleAvatarSuccess: UploadProps['onSuccess'] = (res) => {
    form.avatar = res.imgUrl
}

</script>

<style scoped>
.box {
    width: 100%;
    height: 97%;
    /* display: flex; */
    background-color: #fff;
    border-radius: 6px;

}

.top {
    width: 100%;
    height: 6%;
    font-size: 18px;
    /* font-weight: bold; */
    border-bottom: 1px solid #888787;
    display: flex;
    justify-content: space-between;
}

.top h1 {
    margin-left: 20px;
    line-height: 40px;
}
</style>